<template>
  <main class="px-[14px] pb-[42px]">
    <template v-if="loading">
      <var-skeleton
        title
        :rows="4"
        :loading="loading"
        :rows-width="['200px', '100px', '50px', '200px']"
        class="enter-y bg-white mb-[16px]"
        v-for="i in 4"
        :key="i"
      />
    </template>
    <template v-else>
      <h1 class="my-[10px] text-[14px] text-[#545454] enter-x">{{ getClassName }} / 平均分</h1>
      <section class="w-full bg-white enter-y">
        <ul class="py-[27.5px] px-[32.5px]">
          <li
            v-for="(i, index) in list"
            class="flex justify-between border-b border-solid border-[#CCCCCC] pb-[8.5px] px-[4px] enter-y"
            :class="index === 0 ? '' : 'mt-[29.5px]'"
          >
            <div class="text-[#545454] text-[12px]">
              {{ i.student_name }}
            </div>
            <div class="text-[#545454] text-[12px]"> {{ i.averageScore }} 分</div>
          </li>
        </ul>
      </section>
    </template>
  </main>
</template>

<script setup lang="ts">
  import { getExamResultList } from '@/api/user';
  import { useUserInfoStoreWithOut } from '@/stores/modules/userInfo';
  import { ExamResult } from '@/utils/interface';
  import { claculate } from '@/hook/student';

  let loading = ref(true);
  let list = ref<ExamResult[]>([]);
  const { getClassName } = storeToRefs(useUserInfoStoreWithOut());
  const getResultList = async () => {
    const { getClassName } = storeToRefs(useUserInfoStoreWithOut());
    const { data } = await getExamResultList(getClassName.value);
    const studentList = new Set();
    for (const i of data) {
      studentList.add(i.student_id);
    }
    studentList.forEach((id) => {
      const obj = claculate(data, id);
      list.value.push(obj);
    });
    list.value = list.value.sort((a, b) => {
      return b.averageScore - a.averageScore;
    });
    loading.value = false;
  };
  getResultList();
</script>
